<template>
  <div>
    <div class="box loginBox" v-if="showLogin == true">
      <div class="title">
        <span class="logo-head"><img src="../../../static/images/icon/logo.png" width="30px"></span>
        <span class="t1">登 录 </span>
        <div class="t2" @click="closeLogin()"><i class="el-icon-close"></i></div>
      </div>
      <el-divider></el-divider>
      <el-form :label-position="labelPosition" :rules="loginRules" :model="loginForm" ref="loginForm">
        <el-form-item label="电话号码" prop="userPhone">
          <el-input v-model="loginForm.userPhone" placeholder="请输入电话号码" :disabled="loginType.userPwd"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="userPwd" show-password>
          <el-input type="userPwd" v-model="loginForm.userPwd" placeholder="请输入密码"
                    :disabled="loginType.userPwd"></el-input>
        </el-form-item>
        <!--        <el-form-item label="" >-->
        <!--          <el-checkbox-group v-model="loginForm.jizhu" class="fl">-->
        <!--            <el-checkbox label="记住密码" name="jizhu"></el-checkbox>-->
        <!--          </el-checkbox-group>-->
        <!--        </el-form-item>-->

        <el-row class="btn">
          <el-button class="loginBtn" type="primary" @click="startLogin" :disabled="loginType.userPwd">登录</el-button>
          <el-button class="registerBtn" type="info" @click="goRegister" :disabled="loginType.userPwd">注册</el-button>
        </el-row>
      </el-form>
    </div>

    <div class="box registerBox" v-if="showLogin == false">
      <div class="title">
        <span class="logo-head"><img src="../../../static/images/icon/logo.png" width="30px"></span>
        <span class="t1">注 册</span>
        <div class="t2" @click="closeLogin()"><i class="el-icon-close"></i></div>
      </div>
      <el-divider></el-divider>
      <el-form :rules="rules" :label-position="labelPosition" :model="registerForm" ref="registerForm">
        <el-form-item label="电话号码" prop="userPhone">
          <el-input v-model="registerForm.userPhone" placeholder="请输入电话号码"
                    :disabled="loginType.userPwd"></el-input>
        </el-form-item>

        <el-form-item label="昵称" prop="nickName">
          <el-input v-model="registerForm.nickName" placeholder="昵称长度在1~12之间" :disabled="loginType.userPwd"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="userPwd">
          <el-input type="userPwd" v-model="registerForm.userPwd" placeholder="密码长度在6~12之间" show-password
                    :disabled="loginType.userPwd"></el-input>
        </el-form-item>

        <el-form-item label="确认密码" prop="password2">
          <el-input type="userPwd" v-model="registerForm.password2" placeholder="请再次输入密码" show-password
                    :disabled="loginType.userPwd"></el-input>
        </el-form-item>

        <!--        <el-form-item label="邮箱" prop="email">-->
        <!--          <el-input v-model="registerForm.email" placeholder="请输入正确的邮箱进行注册" :disabled="loginType.userPwd"></el-input>-->
        <!--        </el-form-item>-->

        <el-row class="btn">
          <el-button class="loginBtn" type="primary" :disabled="loginType.userPwd" @click="userRegister()">注册
          </el-button>
          <el-button class="registerBtn" type="info" @click="goLogin" :disabled="loginType.userPwd">返回登录</el-button>
        </el-row>
      </el-form>
    </div>

    <!-- <div class="box setPwdBox" v-if="showLogin == false&& showzhuce ==false">
      <div class="title" >
        <span class="logo-head"><img src="../../../static/images/icon/logo.png" width="30px"></span>
        <span class="t1">忘记密码 </span>
        <div class="t2" @click="closeLogin()"><i class="el-icon-close"></i></div>
      </div>
      <el-divider></el-divider>
      <el-steps :active="setactive" finish-status="success">
        <el-step title="验证身份">
          <el-form :label-position="labelPosition" :rules="loginRules" :model="loginForm" ref="loginForm">
            <el-form-item label="手机号码" prop="userName">
              <el-input v-model="loginForm.userName" placeholder="请输入手机号码" ></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="userPwd">
              <el-input type="userPwd" v-model="loginForm.userPwd" placeholder="请输入验证码"></el-input>
            </el-form-item>
          </el-form>
          <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
        </el-step>

        <el-step title="重置密码"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
    </div> -->

    <div class="mask"></div>

  </div>
</template>

<script>
import {login, localLogin, localRegister} from '@/api/user'
import service from '../../utils/request'

export default {
  name: 'share',
  data () {
    return {
      loading: null,
      setactive: 0,
      option: {
        fullscreen: true,
        lock: true
      },
      vueMoguWebUrl: process.env.VUE_MOGU_WEB,
      // 显示登录页面
      showLogin: true,
      showzhuce: false,
      isLogin: false,
      table: false,
      dialog: false,
      labelPosition: 'right',
      loginForm: {
        userPhone: '',
        userName: '',
        userPwd: '',
        jizhu: [],//记住密码复选框

      },
      registerForm: {
        userPhone: '',
        userName: '',
        userPwd: '',
        password2: '',
        email: ''
      },
      // 登录类别
      loginType: {
        // userPhone:true,
        userPwd: true,
      },
      loginRules: {
        userPhone: [
          {required: true, message: '请输入电话号码', trigger: 'blur'},
          {min: 11, message: '用户名长度等于 11 个字符', trigger: 'blur'},
          {max: 11, message: '用户名长度等于 11 个字符', trigger: 'blur'}
        ],
        nickName: [
          {required: true, message: '请输入昵称', trigger: 'blur'},
          {min: 1, message: '用户名长度大于等于 1 个字符', trigger: 'blur'},
          {max: 12, message: '用户名长度不能大于 12 个字符', trigger: 'blur'}
        ],
        userPwd: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 5, message: '密码长度需要大于等于 5 个字符', trigger: 'blur'},
          {max: 12, message: '密码长度不能大于 12 个字符', trigger: 'blur'}
        ]
      },
      rules: {
        userPhone: [
          {required: true, message: '请输入电话号码', trigger: 'blur'},
          {min: 11, message: '用户名长度等于 11 个字符', trigger: 'blur'},
          {max: 11, message: '用户名长度等于 11 个字符', trigger: 'blur'}
        ],
        nickName: [
          {required: true, message: '请输入昵称', trigger: 'blur'}
        ],
        userPwd: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 5, message: '密码长度需要大于等于 5 个字符', trigger: 'blur'},
          {max: 12, message: '密码长度不能大于 12 个字符', trigger: 'blur'}
        ],
        password2: [
          {required: true, message: '请再次输入密码', trigger: 'blur'},
          {min: 5, message: '密码长度需要大于等于 5 个字符', trigger: 'blur'},
          {max: 12, message: '密码长度不能大于 12 个字符', trigger: 'blur'}
        ],
        email: [
          {required: true, message: '邮箱不能为空', trigger: 'blur'},
          {pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/, message: '请输入正确的邮箱'}
        ]
      },
      url: {
        addUser: 'http://localhost:8080/jeecg-boot//sun/sunUser/add',
        login: 'http://localhost:8080/jeecg-boot//sun/sunUser/login',
      }
    }
  },
  components: {},
  created () {
    this.setLoginTypeList()
  },
  methods: {
    //注册接口
    userRegister () {
      let params = {}
      params.userName = this.registerForm.userName
      params.userPwd = this.registerForm.userPwd
      params.userPhone = this.registerForm.userPhone
      console.log(params)
      service.post(this.url.addUser, params)
        .then((res) => {
          if (res.data.success) {
            this.$message({
              message: '注册成功',
              type: 'success'
            })
          }
        }).catch(error=>{
        this.$message({
          message: '注册失败,该电话号码已经被注册',
          type: 'error'
        })
      })
    },
    next () {
      if (this.setactive++ > 2) this.setactive = 0
    },
    setLoginTypeList: function () {
      // 获取登录方式列表
      let webConfigData = this.$store.state.app.webConfigData
      if (webConfigData.loginTypeList != undefined) {
        let loginTypeList = JSON.parse(webConfigData.loginTypeList)
        for (let a = 0; a < loginTypeList.length; a++) {
          switch (loginTypeList[a]) {
            case '1': {
              this.loginType.userPwd = false
            }
              break
            default: {
              // console.log('登录方式设置有误！！')
            }
          }
        }
      }
    },
    startLogin: function () {
      this.$refs.loginForm.validate((valid) => {
        // console.log('开始校验', valid)
        if (!valid) {
          console.log('校验失败')
        } else {
          var params = {}
          params.userPhone = this.loginForm.userPhone
          params.userPwd = this.loginForm.userPwd
          // params.isRememberMe = 1
          service.post(this.url.login, params)
            .then((res) => {
              if (res.data.success) {
                this.$message({
                  message: '登录成功',
                  type: 'success',
                
                })
                location.replace(this.vueMoguWebUrl + '/#/?token=1')
                // location.replace(this.vueMoguWebUrl)
                window.location.reload()
                //将数据存入本地
                window.sessionStorage.setItem('userInfo', JSON.stringify(res.data.result))
                // let temp = window.sessionStorage.getItem("userInfo")
                // console.log(JSON.parse(temp).id)
               
              }
            }).catch((error) => {
            console.log(error)
            this.$message({
              message: '用户名或者密码错误',
              type: 'error'
            })
          })
        }
      })
    },
    startRegister: function () {
      this.$refs.registerForm.validate((valid) => {
        if (!valid) {
          console.log('校验失败')
        } else {
          let userPwd = this.registerForm.userPwd
          let passWord2 = this.registerForm.password2
          if (userPwd != passWord2) {
            this.$message({
              type: 'success',
              message: '两次密码不一致'
            })
            return
          }
          var params = {}
          params.userName = this.registerForm.userName
          params.userPwd = this.registerForm.userPwd
          params.email = this.registerForm.email
          params.nickName = this.registerForm.nickName
          localRegister(params).then(response => {
            if (response.code == this.$ECode.SUCCESS) {
              this.$message({
                type: 'success',
                message: response.data
              })
              // 打开登录页面
              this.goLogin()
            } else {
              this.$message({
                type: 'error',
                message: response.data
              })
            }
          })
        }
      })
    },
    goLogin: function () {
      this.showLogin = true
    },
    goRegister: function () {
      this.showLogin = false
      // this.showzhuce=true
    },
    closeLogin: function () {
      this.$emit('closeLoginBox', '')
    },
    submitBox (e) {
      let params = {}
      params.blogUid = e.blogUid
      params.source = e.source
      params.userUid = e.userUid
      params.content = e.content
      params.blogUid = e.blogUid
      addComment(params).then(response => {
        if (response.code == this.$ECode.SUCCESS) {
          this.$notify({
            title: '成功',
            message: '发表成功~',
            type: 'success',
            offset: 100
          })
        } else {
          this.$notify.error({
            title: '错误',
            message: response.data,
            offset: 100
          })
        }
        this.getCommentDataList()
      })
    },
  }
}
</script>

<style>

</style>
